<template>
  <div class="wrapper">
    <el-form :model="form" label-width="auto" style="max-width: 400px" class=" overlay">
      <el-form-item label="事件类型">
        <el-select v-model="form.type" placeholder="请选择交通事件类型">
          <el-option label="碰撞" value="shanghai" />
          <el-option label="碾压" value="beijing" />
          <el-option label="刮擦" value="beijing" />
          <el-option label="翻车" value="beijing" />
          <el-option label="坠车" value="beijing" />
          <el-option label="失火" value="beijing" />
          <el-option label="其他" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="发生时间">
        <el-col :span="11">
          <el-date-picker v-model="form.date1" type="date" style="width: 100%" />
        </el-col>
        <el-col :span="2" class="text-center">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="11">
          <el-time-picker v-model="form.date2" style="width: 100%" />
        </el-col>
      </el-form-item>
      <el-form-item label="事件地址">
        <el-input v-model="form.address" />
      </el-form-item>
      <el-form-item label="经纬度" @click="showMap">
        <el-input v-model="form.lnglat" />
      </el-form-item>
      <el-form-item label="车牌号">
        <el-input v-model="form.carNumber" />
      </el-form-item>
      <el-form-item label="驾驶员">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="事件描述">
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
      <el-form-item label="上传图片">
        <!-- 这里要实现图片上传===================================== -->
        <label for="file-input"></label>
        <!-- 当向type=file类型的input传入文件的时候 会触发Change事件 -->
        <input type="file" id="file-input" accept="image/*" multiple />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="CheckNoticeClick">提交</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>

  </div>

</template>

<script setup>
//引入checkNoticeClick方法
import { useMapgisStore } from '@/stores/mapgis.js';
import { ref, getCurrentInstance, onMounted } from 'vue'
import { storeToRefs } from 'pinia';
import { reactive } from 'vue'
//引入添加点的api
import addPoint from '@/mapgis-api/addPoint.js'
const { proxy } = getCurrentInstance()
const { showReport } = storeToRefs(useMapgisStore())
const { CheckNoticeClick, getLayerByTitle } = useMapgisStore();

const form = reactive({
  name: '',
  date1: '',
  date2: '',
  address: '',
  carNumber: '',
  type: [],
  desc: '',
  lnglat: '',
})

onMounted(() => {
  const map = proxy.$map
  //获取图层
  const docLayer = getLayerByTitle({ map, title: 'layer' })
  console.log(docLayer)
  map.on("click", (evt) => {
    CheckNoticeClick()

    let position = evt.coordinate;
    form.lnglat = position
    CheckNoticeClick()
    let attr = [{
      name: '事件编号',
      type: 'string',
      value: '111111'
    }, {
      name: '事件类型',
      type: 'string',
      value: '碰撞'
    }, {
      name: '事件等级',
      type: 'short',
      value: '1'
    }, {
      name: '发生时间',
      type: 'string',
      value: '123'
    }, {
      name: '发生地点',
      type: 'string',
      value: '123'
    }, {

      name: '车牌号',
      type: 'string',
      value: '123'
    }, {
      name: '驾驶员',
      type: 'string',
      value: '123'
    }, {
      name: '处理状态',
      type: 'string',
      value: '123'
    }
    ]
    let service = {
      name: "guanggu",
      layerId: 2
    }
    addPoint({
      position,
      attr,
      service,
      docLayer
    })
  })
})

//编写地图点击事件
const showMap = () => {
  CheckNoticeClick()
}


</script>

<style scoped>
.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.5);
}

.overlay {
  position: fixed;
  z-index: 101;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}
</style>